<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数智作业后台管理系统 - 注册</title>
    <link rel="icon" href="/assets/ico/7favicon.png" type="image/png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        .gradient-bg {
            background: linear-gradient(90deg, #4f46e5 0%, #3b82f6 100%);
        }
        .register-card {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(209, 213, 219, 0.3);
        }
        .input-group {
            position: relative;
        }
        .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #6b7280;
        }
        body {
            background-image: url('https://source.unsplash.com/random/1920x1080/?gradient');
            background-size: cover;
            background-position: center;
        }
        .animate-fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen py-8">
    <div class="bg-white bg-opacity-95 p-10 rounded-xl register-card w-full max-w-md animate-fade-in m-4">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-transparent bg-clip-text gradient-bg inline-block">用户注册</h1>
            <p class="text-gray-500 mt-2">创建您的账号</p>
        </div>

        <form id="registerForm" class="space-y-4">
            <div>
                <label for="username" class="block text-gray-700 font-medium mb-2">用户名</label>
                <input type="text" id="username" name="username" 
                    class="border border-gray-300 p-3 w-full rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200" 
                    placeholder="请输入2-20个字符的用户名" required>
                <div id="username-error" class="text-red-500 text-sm mt-1 hidden"></div>
            </div>

            <div>
                <label for="password" class="block text-gray-700 font-medium mb-2">密码</label>
                <div class="input-group">
                    <input type="password" id="password" name="password" 
                        class="border border-gray-300 p-3 w-full rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200" 
                        placeholder="请输入6-20位密码" required>
                    <span class="toggle-password">
                        <i class="fas fa-eye-slash"></i>
                    </span>
                </div>
                <div id="password-error" class="text-red-500 text-sm mt-1 hidden"></div>
            </div>

            <div>
                <label for="confirmPassword" class="block text-gray-700 font-medium mb-2">确认密码</label>
                <div class="input-group">
                    <input type="password" id="confirmPassword" 
                        class="border border-gray-300 p-3 w-full rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200" 
                        placeholder="请再次输入密码" required>
                    <span class="toggle-password">
                        <i class="fas fa-eye-slash"></i>
                    </span>
                </div>
                <div id="confirmPassword-error" class="text-red-500 text-sm mt-1 hidden"></div>
            </div>

            <div>
                <label for="phone" class="block text-gray-700 font-medium mb-2">手机号</label>
                <input type="tel" id="phone" name="phone" 
                    class="border border-gray-300 p-3 w-full rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200" 
                    placeholder="请输入11位手机号" required>
                <div id="phone-error" class="text-red-500 text-sm mt-1 hidden"></div>
            </div>

            <div>
                <label for="fullName" class="block text-gray-700 font-medium mb-2">姓名</label>
                <input type="text" id="fullName" name="fullName" 
                    class="border border-gray-300 p-3 w-full rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200" 
                    placeholder="请输入您的真实姓名" required>
                <div id="fullName-error" class="text-red-500 text-sm mt-1 hidden"></div>
            </div>

            <div>
                <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
                <input type="email" id="email" name="email" 
                    class="border border-gray-300 p-3 w-full rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200" 
                    placeholder="请输入邮箱地址" required>
                <div id="email-error" class="text-red-500 text-sm mt-1 hidden"></div>
                <div class="text-gray-500 text-xs mt-1">邮箱将用于密码找回，请确保填写正确</div>
            </div>

            <div>
                <label for="gender" class="block text-gray-700 font-medium mb-2">性别</label>
                <select id="gender" name="gender" 
                    class="border border-gray-300 p-3 w-full rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200">
                    <option value="">请选择</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>

            <button type="submit" 
                class="w-full py-3 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-indigo-700 transition duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5 mt-6">
                注册
            </button>

            <div class="text-center mt-4">
                <a href="login.html" class="text-blue-600 hover:text-blue-800 transition duration-200">
                    已有账号？返回登录
                </a>
            </div>
        </form>

        <!-- 成功提示弹窗 -->
        <div id="successModal" class="fixed inset-0 flex items-center justify-center z-50 hidden">
            <div class="absolute inset-0 bg-black opacity-50"></div>
            <div class="bg-white rounded-lg p-8 max-w-sm mx-4 relative z-10 animate-fade-in">
                <div class="text-center">
                    <i class="fas fa-check-circle text-5xl text-green-500 mb-4"></i>
                    <h3 class="text-xl font-bold mb-2">注册成功！</h3>
                    <p class="text-gray-600 mb-6">您的账号已创建成功，即将跳转到登录页面</p>
                    <button onclick="window.location.href='login.html'" 
                        class="w-full py-2 px-4 bg-green-500 text-white rounded-lg hover:bg-green-600 transition duration-200">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('registerForm');
            const successModal = document.getElementById('successModal');
            const togglePasswordBtns = document.querySelectorAll('.toggle-password');

            // 密码可见性切换
            togglePasswordBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const input = this.previousElementSibling;
                    const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                    input.setAttribute('type', type);
                    this.querySelector('i').classList.toggle('fa-eye');
                    this.querySelector('i').classList.toggle('fa-eye-slash');
                });
            });

            // 表单提交处理
            form.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                // 重置错误提示
                document.querySelectorAll('.text-red-500').forEach(el => el.classList.add('hidden'));
                
                // 表单验证
                let isValid = true;
                const formData = {};
                
                // 验证并收集表单数据
                const fields = {
                    username: {min: 2, max: 20, message: '用户名长度必须在2-20个字符之间'},
                    password: {min: 6, max: 20, message: '密码长度必须在6-20个字符之间'},
                    phone: {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号'},
                    email: {pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, message: '请输入正确的邮箱地址'}
                };

                for (const [field, rules] of Object.entries(fields)) {
                    const input = document.getElementById(field);
                    const value = input.value.trim();
                    const errorEl = document.getElementById(`${field}-error`);

                    if (!rules.optional && !value) {
                        errorEl.textContent = `请输入${input.placeholder}`;
                        errorEl.classList.remove('hidden');
                        isValid = false;
                        continue;
                    }

                    if (rules.min && (value.length < rules.min || value.length > rules.max)) {
                        errorEl.textContent = rules.message;
                        errorEl.classList.remove('hidden');
                        isValid = false;
                        continue;
                    }

                    if (rules.pattern && value && !rules.pattern.test(value)) {
                        errorEl.textContent = rules.message;
                        errorEl.classList.remove('hidden');
                        isValid = false;
                        continue;
                    }

                    formData[field] = value;
                }

                // 确认密码验证
                if (document.getElementById('password').value !== document.getElementById('confirmPassword').value) {
                    document.getElementById('confirmPassword-error').textContent = '两次输入的密码不一致';
                    document.getElementById('confirmPassword-error').classList.remove('hidden');
                    isValid = false;
                }

                if (!isValid) return;

                // 添加其他字段
                formData.fullName = document.getElementById('fullName').value;
                formData.gender = document.getElementById('gender').value;

                try {
                    const response = await fetch('/register', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(formData)
                    });

                    if (response.ok) {
                        // 显示成功弹窗
                        successModal.classList.remove('hidden');
                        // 3秒后自动跳转
                        setTimeout(() => {
                            window.location.href = 'login.html';
                        }, 3000);
                    } else {
                        const error = await response.text();
                        throw new Error(error);
                    }
                } catch (error) {
                    alert(error.message || '注册失败，请稍后重试');
                }
            });
        });
    </script>
</body>
</html> 